<template>
  <div>
    <Content @InputFn="InputFn" @QueryFn="QueryFn" @OpenDiaFn="OpenDiaFn" @OneBtn="OneBtn" @TwoBtn="TwoBtn"
    @CheckDetailsFn="CheckDetailsFn" @headerStyleEvent="headerStyleEvent"/>
    <!--     @configurationFn="configurationFn" -->
    <ADDdialog title="新增区域" :AddAreadialog="AddAreadialog" @CloseDia="CloseDiaFn" @OpenDia="OpenDiaQd">
      <template #AddArea>
          <!-- 表单内容 -->
          <el-form
            ref="departRef"
            :model="FromData"
            label-width="90px"
            :rules="departRules"
          >
            <el-form-item label="区域名称:" prop="regionName" >
              <el-input
                v-model="FromData.regionName"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="备注说明:" prop="remark">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入备注，不超过40个字"
                v-model="FromData.remark"
                :autosize="{ minRows: 4, maxRows: 5}">
              </el-input>
            </el-form-item>
          </el-form>
      </template>
    </ADDdialog>
    <ADDdialog title="修改区域" :ModifyAreadialog="ModifyAreadialog" @CloseDia="CloseDiaFn" @OpenDia="OpenDiaQd">
      <template #ModifyArea>
          <!-- 表单内容 -->
          <el-form
            ref="TwodepartRef"
            :model="FromData"
            label-width="90px"
            :rules="departRules"
          >
            <el-form-item label="区域名称:" prop="regionName" >
              <el-input
                v-model="FromData.regionName"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="备注说明:" prop="remark">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入备注，不超过40个字"
                v-model="FromData.remark"
                :autosize="{ minRows: 4, maxRows: 5}">
              </el-input>
            </el-form-item>
          </el-form>
      </template>
    </ADDdialog>
    <ADDdialog title="区域详情" :AreaMsgdialog="AreaMsgdialog" @CloseDia="CloseDiaFn">
      <template #AreaMsg>
        <div style="text-align: left; padding: 0px 50px 0px 50px;">
        <div style="margin-bottom: 30px;">
          <span>区域名称：</span><span>{{AderrData[0].region.name}}</span>
        </div>
        <div style="display: flex;">
          <div style="margin-top: 10px">包含点位：</div>
          <el-table :header-cell-style="headerStyleEvent" :data="AderrData" >
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="点位名称" prop="name"></el-table-column>
            <el-table-column label="设备数量" prop="vmCount"></el-table-column>
          </el-table>
        </div>
      </div>
      </template>
    </ADDdialog>
  </div>
</template>

<script>
import { RegionalListRequest, AddRegionalRequest, ModifyRegionalRequest, MsgRegionalRequest } from '@/api'
// VUEX模块化使用辅助函数
import { Message } from 'element-ui'
import { createNamespacedHelpers } from 'vuex'
const { mapMutations, mapState } = createNamespacedHelpers('publics')
export default {
  data () {
    return {
      // 弹窗
      AddAreadialog: false,
      ModifyAreadialog: false,
      AreaMsgdialog: false,
      // 表单数据
      FromData: {
        regionName: '',
        remark: '',
        id: 0
      },
      AderrData: [{ region: '' }],
      // 校验
      departRules: {
        regionName: [
          { required: true, message: '此项目为必填项', trigger: ['blur', 'change'] },
          { min: 1, max: 15, message: '1 - 15个字符', trigger: ['blur', 'change'] }
        ],
        remark: [
          { required: true, message: '此项目为必填项', trigger: ['blur', 'change'] },
          { min: 1, max: 40, message: '1 - 40个字符', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  created () {
    this.listFn()
  },
  methods: {
    ...mapMutations(['MaOrder', 'MaAddnum', 'MaAeenum', 'MaNum']),
    // 表格头回调函数
    headerStyleEvent () {
      return 'background-color:#f3f6fb'
    },
    async listFn () {
      // 区域列表
      const res = await RegionalListRequest(this.PropsData.Order)
      console.log(res.data.currentPageRecords)
      const dataNew = []
      res.data.currentPageRecords.map(item => {
        const obj = {
          taskCode: item.name,
          innerCode: item.nodeCount,
          taskType: { typeName: item.remark },
          id: item.id
        }
        dataNew.push(obj)
      })
      // 转换数据
      this.MaOrder({
        currentPageRecords: dataNew,
        totalCount: res.data.totalCount,
        totalPage: res.data.totalPage
      }
      )
    },
    // 弹窗显示
    OpenDiaFn () {
      this.AddAreadialog = true
    },
    // 弹窗关闭
    CloseDiaFn () {
      this.AddAreadialog = false
      this.ModifyAreadialog = false
      this.AreaMsgdialog = false
      if (this.$refs.departRef) {
        this.$refs.departRef.resetFields()
      }
      this.FromData = {
        regionName: null,
        remark: null,
        id: null
      }
    },
    // 确定按钮
    async OpenDiaQd (item) {
      if (item === '6') {
        console.log(1)
        this.$refs.departRef.validate(async (val) => {
          if (val) {
            console.log(1)
            try {
              await AddRegionalRequest(this.FromData)
              this.listFn()
              this.CloseDiaFn()
              this.$refs.departRef.resetFields()
              Message.success('新增成功')
            } catch (err) {
              Message.warning('新增失败')
            }
          }
        })
      }
      if (item === '7') {
        console.log(this.FromData)
        try {
          const res = await ModifyRegionalRequest(this.FromData)
          console.log(res)
          this.listFn()
          this.CloseDiaFn()
          Message.success('修改成功')
        } catch (err) {
          Message.warning('修改失败')
        }
        this.ModifyAreadialog = false
      }
    },
    InputFn () {
      console.log(this.$store.state.publics.PropsData)
    },
    // 修改
    async CheckDetailsFn (item, num) {
      if (num === '1') {
        this.AreaMsgdialog = true
        this.PropsData.Order.regionId = item.id
        const res = await MsgRegionalRequest(this.PropsData.Order)
        this.AderrData = res.data.currentPageRecords
      }
      if (num === '2') {
        this.FromData.id = item.id
        this.FromData.regionName = item.taskCode
        this.FromData.remark = item.taskType.typeName
        this.ModifyAreadialog = true
      }
      if (num === '3') {
        this.$notify({
          title: '提示',
          message: '演示系统不支持操作',
          type: 'warning'
        })
      }
    },
    // 查询
    QueryFn () {
      this.PropsData.Order.name = this.PropsData.Order.taskCode
      this.MaNum()
      this.listFn()
      console.log(this.PropsData.Order)
    },
    // 下页，上页键
    TwoBtn () {
      this.MaAddnum()
      this.listFn()
    },
    OneBtn () {
      this.MaAeenum()
      this.listFn()
    }
  },
  computed: {
    ...mapState(['PropsData'])
  }

}
</script>

<style>

</style>
